<ui:composition template="index.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

	<ui:param name="doc" value="#{documentBean.findById(documentBean.documentId)}" />
	
	<f:metadata>
		<f:viewParam name="doc_id" value="#{documentBean.documentId}" />
	</f:metadata>

	<ui:param name="pageTitle" value="Documento | ReviewIt" />
	<ui:param name="pageName" value="page-document" />

	<ui:define name="css"></ui:define>

	<ui:define name="feature"></ui:define>

	<ui:define name="content">
		<h3 id="title-doc">
			<div class="icon-file-alt"></div>
			#{doc.title}
		</h3>
		<div>
			<div class="icon-user"></div>
			<a href="user.xhtml?user_id=#{doc.owner.id}">#{doc.owner.firstName} #{doc.owner.lastName}</a> | 
			<div class="icon-calendar"></div>
			<h:outputText value="#{doc.creationDate}"><f:convertDateTime pattern="dd/MM/yy" /></h:outputText> | 
			<div class="icon-check-empty"></div>
			#{doc.type}
		</div>
		<div id="document">
			<a id="doc-zoom" href="#" class="icon-zoom-in">Ampliar</a>
        	<p:media value="#{anexoBean.getAnexo(documentBean.documentId)}" player="pdf" style="width: 100%; height: 600px;"/>
        </div>
		<div>
			<div id="doc-score">
				<a href="" class="icon-caret-up"></a>
				<h2>#{doc.score}</h2>
				<a href="" class="icon-caret-down"></a>
			</div>
			<div id="doc-description">
				<h4>
					<div class="icon-align-left"></div>
					Descrição
				</h4>
				<hr />
				#{doc.description}
			</div>
		</div>
		<div id="doc-feedbacks">
			<h4>
				<div class="icon-comment"></div>
				Feedbacks
			</h4>
			<hr />
			<div id="disqus_thread"></div>
		</div>
	</ui:define>

	<ui:define name="sidebar">
		<div id="sidebar-tags" class="panel">
			<span class="icon-tag"></span> <strong>Tags</strong>
			<hr />
			<ui:repeat var="tag" value="#{doc.tags}">
				<a href="documents.xhtml?tag=#{tag}" class="tiny button">#{tag}</a>
			</ui:repeat>
		</div>
		<div id="sidebar-related-docs" class="panel">
			<span class="icon-copy"></span> <strong>Relacionados</strong>
			<hr />
			<ul>
				<ui:repeat var="docs" value="#{documentBean.getRelatedDocuments(doc.tags)}">
					<li><a href="document.xhtml?doc_id=#{docs.id}">#{docs.title}</a></li>
				</ui:repeat>
			</ul>
		</div>
	</ui:define>

	<ui:define name="js_body">
		<script>
			$(function(){
				$('#doc-zoom').click(function(){
					if($(this).hasClass('icon-zoom-in')){
						$(this).removeClass('icon-zoom-in');
						$(this).addClass('icon-zoom-out');
						$(this).html('Diminuir');
						$('aside').css('display', 'none');
						$('#content .columns').first().removeClass('large-9');
						$('#content .columns').first().addClass('large-12');
					} else {
						$(this).addClass('icon-zoom-in');
						$(this).removeClass('icon-zoom-out');
						$(this).html('Ampliar');
						$('aside').css('display', 'block');
						$('#content .columns').first().addClass('large-9');
						$('#content .columns').first().removeClass('large-12');
					}
				});
			});
		
			// Google Docs Viewer
			/*var url = $('#doc').data('url');
			url = 'http://benthamscience.com/open/toaij/articles/V002/21TOAIJ.pdf';
			url = 'https://docs.google.com/viewer?embedded=true&amp;url='+encodeURIComponent(url);
			$('#doc').html('&lt;iframe src='+url+'&gt;&lt;/iframe&gt;');*/
			
			// Disqus
			var disqus_shortname = 'reviewitproject';
	        (function() {
	            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
	            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
	            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
	        })();
		</script>
	</ui:define>
</ui:composition>